<template>
    <div>
        <div>
            <el-button @click="dialogVisible = !dialogVisible">可拖拽弹框。</el-button>
        </div>
        <el-dialog v-dialogDrag
                   title="拖拽"
                   :visible.sync="dialogVisible"
                   v-if="dialogVisible"
                   width="460px"
                   height="200px"
                   :show-close="false"
                   :close-on-press-escape="false"
                   :close-on-click-modal="true">
            <div>
                拖拽。
            </div>
        </el-dialog>

        <transition-group tag="div">
            　　<div class="item"
                 v-for="(item) in items"
                 :key="item.id"
                 style="display: inline-block"
                 　　draggable="true"
                 @dragstart="handleDragStart($event, item)"
                 @dragover.prevent="handleDragOver($event, item)"
                 　　@dragenter="handleDragEnter($event, item)"
                 @dragend="handleDragEnd($event, item)">
                <div style="margin: 20px;"
                     class="fl">
                    <el-popover placement="right"
                                width='270px'
                                trigger="manual">
                            <div slot="reference">
                            　　<img :src="item.mediaPath"
                                @contextmenu.prevent="$refs.ctxMenu.open($event,{color: 'lightblue', index: item.id, item: item})"
                                style="width: 120px; height: 120px;"
                                >
                                <p>{{item.mediaName}}</p>
                            </div>
                        <p style='margin-bottom:5px;word-break:break-all;line-height:1.3'>名称：{{item.mediaName}}</p>
                        <p style='margin-bottom:5px;word-break:break-all;line-height:1.3'>大小：{{getFileSize(item.mediaSize)}}</p>
                        <p style='margin-bottom:5px;word-break:break-all;line-height:1.3'>创建时间：{{item.createTime}}</p>
                        <p style='margin-bottom:5px;word-break:break-all;line-height:1.3'>删除状态：{{item.deleteStatus==1?'已删除':'未删除'}}</p>
                        <p style='margin-bottom:5px;word-break:break-all;line-height:1.3'>存储位置：{{item.mediaPath}}</p>
                    </el-popover>
                </div>
            </div>
        </transition-group>
        <ctxmenu id="context-menu"
                 ref="ctxMenu"
                 @ctx-open="onCtxOpen"
                 @ctx-cancel="resetCtxLocals"
                 @ctx-close="onCtxClose"
                 class="right-menu">
            <li class="ctx-item"
                @click="chooseItem(menuData)">下载</li> 
            <li class="ctx-item"
                @click="chooseItem(menuData)">删除</li>
            <li class="ctx-item"
                @click="chooseItem(menuData)">预览</li>
            <li class="ctx-item"
                @click="chooseItem(menuData)">重命名</li>
            <li class="ctx-item"
                @click="chooseItem(menuData)">移入到</li>
            <li class="ctx-item"
                @click="chooseItem(menuData)">移出文件夹</li>
        </ctxmenu>
    </div>
</template>
<script>
import ctxmenu from './contextMenu/ctx-menu.vue'
const newMenuData = () => ({ color: null });
export default {
    components: { ctxmenu },
    data () {
        return {
            colors: ['pink', 'lightblue', 'green', 'red', 'turquoise'],
            menuData: newMenuData(),
            menuVisible: false,
            dialogVisible: false,
            dragging: null,
            items: [
                { id: 1, isFile: true, mediaName: '嘿', mediaSize: 1250, createTime: '2021-08-09', deleteStatus: 1, mediaPath: 'https://img1.baidu.com/it/u=230079245,1531535762&fm=15&fmt=auto&gp=0.jpg' },
                { id: 2, isFile: true, mediaName: '嘿2', mediaSize: 1250, createTime: '2021-08-09', deleteStatus: 0, mediaPath: 'https://img1.baidu.com/it/u=2922193625,680961611&fm=26&fmt=auto&gp=0.jpg' },
                { id: 3, isFile: true, mediaName: '嘿3', mediaSize: 1250, createTime: '2021-08-09', deleteStatus: 1, mediaPath: 'https://img1.baidu.com/it/u=2844696422,1685648151&fm=26&fmt=auto&gp=0.jpg' },
                { id: 4, isFile: false, mediaName: '文件夹', mediaSize: 1250, createTime: '2021-08-09', deleteStatus: 1, mediaPath: 'https://img0.baidu.com/it/u=1801325503,1075282238&fm=26&fmt=auto&gp=0.jpg' },
            ]
        }
    },
    methods: {
        chooseItem (item) {
            console.log(item);
        },
        onCtxOpen (locals) {
            console.log('open', locals)
            this.menuData = locals
        },
        onCtxClose (locals) {
            console.log('close', locals)
        },
        resetCtxLocals () {
            this.menuData = newMenuData()
        },
        getFileSize (fileByte) {//文件大小
            var fileSizeByte = fileByte;
            var fileSizeMsg = "";
            if (fileSizeByte < 1048576) fileSizeMsg = (fileSizeByte / 1024).toFixed(2) + "KB";
            else if (fileSizeByte == 1048576) fileSizeMsg = "1MB";
            else if (fileSizeByte > 1048576 && fileSizeByte < 1073741824) fileSizeMsg = (fileSizeByte / (1024 * 1024)).toFixed(2) + "MB";
            else if (fileSizeByte > 1048576 && fileSizeByte == 1073741824) fileSizeMsg = "1GB";
            else if (fileSizeByte > 1073741824 && fileSizeByte < 1099511627776) fileSizeMsg = (fileSizeByte / (1024 * 1024 * 1024)).toFixed(2) + "GB";
            else fileSizeMsg = "文件超过1TB";
            return fileSizeMsg;
        },
        handleDragStart (e, item) {
            this.dragging = item;
        },
        handleDragEnd (e, item) { //item => 拖动的元素
            this.dragging = null
        },
        //首先把div变成可以放置的元素，即重写dragenter/dragover
        handleDragOver (e, item) {
            e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
        },
        handleDragEnter (e, item) { // item => 目的地元素
            e.dataTransfer.effectAllowed = "move"//为需要移动的元素设置dragstart事件
            if (item === this.dragging) {
                return
            }
            if (this.dragging.isFile == true && item.isFile == true) {
                const newItems = [...this.items]
                const src = newItems.indexOf(this.dragging)
                const dst = newItems.indexOf(item)
                newItems.splice(dst, 0, ...newItems.splice(src, 1))
                this.items = newItems
                // console.log(this.items)  //这里是返回的图片的排序
            } else if (this.dragging.isFile == true && item.isFile == false) {
                const newItems = [...this.items]
                const src = newItems.indexOf(this.dragging)
                newItems.splice(src, 1)
                this.$confirm('移入该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.items = newItems
                    console.log(this.items)  //这里是返回的图片的排序
                    this.$message({
                        type: 'success',
                        message: '移入成功!'
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    })
                })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.contextmenu__item {
    display: block;
    line-height: 34px;
    text-align: center;
}
.contextmenu__item:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.menu {
    position: absolute;
    background-color: #fff;
    width: 100px;
    /*height: 106px;*/
    font-size: 12px;
    color: #444040;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    white-space: nowrap;
    z-index: 1000;
}
.contextmenu__item:hover {
    cursor: pointer;
    background: #66b1ff;
    border-color: #66b1ff;
    color: #fff;
}
.ctx-item {
    height: 38px;
    line-height: 33px;
}
</style>